<template>
  <div class="contain">
    <!-- 头部模板下载和信息上传 -->
    <div class="top">
        <el-button :loading="downloadLoading" type="primary" style="margin:0 0 20px 20px;" size="mini" icon="el-icon-document" @click="handleDownload">
            模板下载
        </el-button>
        <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    </div>
    <!-- 详细数据 -->
    <div class="content">
        <div class="top1">
            <span><i class="el-icon-tickets
            "></i></span><span style="margin-left:10px">{{title1}}</span>
            <div class="search">
                <el-input placeholder="输入企业名称/代码" prefix-icon="el-icon-search" 
                    v-model="keywords" @keyup.enter="goSearch()" />
            </div>
            <div class="increase">
                <el-button  type="primary" icon="el-icon-plus" @click="()=>{editing=true}">
                    新增
                </el-button>
            </div>
        </div>
        <!-- 对话框（新建方法名） -->
        <el-dialog :visible.sync="editing" title="创建" width="30%">
            <el-form :model="entityForm" label-width="70px" ref="form">
              <el-form-item label="企业名称">
                <el-input
                  type="String"
                  v-model="entityForm.BussName"
                ></el-input>
              </el-form-item>
              <el-form-item label="类型">
                <el-input type="chart" v-model="entityForm.type"></el-input>
              </el-form-item>
              <el-form-item label="日基线">
                <el-input type="number" v-model="entityForm.BaseLine"></el-input>
              </el-form-item>
              <el-form-item label="连续性">
                <el-select v-model="entityForm.LineBus" placeholder="请选择">
                    <el-option
                      v-for="item in options_dialog"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-form>
            <span class="dialog-footer" slot="footer">
              <el-button @click="save" type="primary">确 定</el-button>
              <el-button @click="editing = false">取 消</el-button>
            </span>
          </el-dialog>
        <div class="table">
            <el-table
            :row-key="row => row.index"
            v-loading="listLoading"
            :data="TableData"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            >
              <!-- <el-table-column label="停电时间" sortable prop="DuraTime" align="center"></el-table-column> -->
              <el-table-column label="企业名称" prop="BussName" align="center"></el-table-column>
              <!-- 类型 -->
              <el-table-column label="类型" prop="Type" 
              min-width="40px" align="center"
              :filters="[{text: 'A', value: 'A'}, 
              {text: 'B', value: 'B'}, {text: 'C', value: 'C'}, 
              {text: '高能耗', value: '高能耗'}]"
              :filter-method="filterHandler1"></el-table-column>
              <!-- 日基线 -->
              <el-table-column label="日基线" prop="BaseLine" 
              min-width="40px" align="center"
              ></el-table-column>
              <!-- 连续性企业 -->
              <el-table-column label="连续性企业" prop="LineBuss" align="center"
              :filters="[{text: '是', value: '是'}, 
              {text: '否', value: '否'}]"
              :filter-method="filterHandler3"></el-table-column>
              <el-table-column label="占位字段2" sortable prop="placeField2" align="center"></el-table-column>
              <el-table-column label="占位字段3" sortable prop="placeField3" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
  </div>
</div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import Pagination from '@/components/Pagination'
import TableData from '@/utils/TableData.js'
export default {
    data() {
        return {
            options_dialog:[{
                value: '选项1',
                label: '是'
                }, {
                value: '选项2',
                label: '否'
            }],
            editing:false,
            downloadLoading: false,
            tableData: [],
            tableHeader: [],
            title1:"详细数据",
            TableData:null,
            listLoading:false,
            entityForm:{
                BussName:'',
                type:'',
                BaseLine:'',
                LineBuss:''
            },
            total: 0,
            listQuery: {
                page: 1,
                limit: 5,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            },
        }
    },
    components: {
        UploadExcelComponent,Pagination
    },
    created() {
        this.getList()
    },
    methods: {
        // 新建框的确认
        save(){
            
        },
        // 上传文档
        beforeUpload(file) {
            const isLt1M = file.size / 1024 / 1024 < 1

            if (isLt1M) {
                return true
            }
            this.$message({
                message: 'Please do not upload files larger than 1m in size.',
                type: 'warning'
            })
            return false
        },
        handleSuccess({ results, header }) {
            this.tableData = results
            this.tableHeader = header
        },
        getList() {
            this.listLoading = true
            let TableArray = []
            for (let i = (this.listQuery.page-1)*this.listQuery.limit;i <this.listQuery.page * this.listQuery.limit;i++)
            {
                if(i<TableData.TableData1.length){
                    TableArray.push(TableData.TableData1[i])
                }
            }
            this.TableData = TableArray;
            console.log(this.TableData)
            this.listLoading = false;
            this.total = TableData.TableData1.length;
        },
        goSearch(event){
            console.log(event)
        },
        filterHandler1(value, row, column){
            const property = column['property'];
            return row[property] === value;
        },
        filterHandler2(value, row, column){
            const property = column['property'];
            return row[property] === value;
        },
        filterHandler3(value, row, column){
            const property = column['property'];
            return row[property] === value;
        },
    }
}
</script>

<style scoped lang="scss">
.contain{
    padding: 20px;
}
.top{
    display: flex;
}
.content{
    width: 100%;
    border: 1px solid #E4E7ED;
}
.top1{
    width: 100%;
    height: 50px;
    font-weight: 10px;
    margin-top: 20px;
    span{
        line-height: 20px;
        margin-left: 20px;
    }
}
.search{
    display: inline-block;
    height: 50px;
    margin-left: 200px;
}
.increase{
    display: inline-block;
    margin-left: 100px;
}
</style>